<template>
  <div class="body">
    <!-- <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="form" size="samll">
		<div class="login-title">登录</div>
		<div class="content">
			<el-form-item prop="phoneNum">
			<el-input v-model="ruleForm.phoneNum" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="ruleForm.password" 
				autocomplete="off" placeholder="请输入密码" />
			</el-form-item>
			<el-form-item prop="loginCheckCode">
				<el-input type="loginCheckCode" v-model="ruleForm.loginCheckCode" 
				autocomplete="off" placeholder="请输入验证码" />
				<span @click="changeCode">
					<img :src="imageUrl" alt="" width="110" height="40"></span>
			</el-form-item>
			<el-form-item>
				<el-button :loading="btn" 
				type="primary" @click="submitForm('ruleForm')" class='login-btn'>提交</el-button>
			</el-form-item>
		</div>
	</el-form> -->
  </div>
</template>
<script>
import { loadScript } from "@/utils/loadScript.js";
import login from "@/api/user/login.js";

export default {
  components: {
    // bwButton
  },
  created() {
    this.changeCode();
  },
  mounted() {
    // loadScript('/market/static/common/js/CryptoJS.js')
  },
  computed: {
    btn() {
      return this.$store.state.loading;
    },
  },
  data() {
    return {
      ruleForm: {
        password: "",
        email: "",
      },
      rules: {
        password: [
          { required: true, trigger: "blur" },
        ],
        phoneNum: [
          { required: true, trigger: "blur" },
        ],
      },
      imageUrl: "",
    };
  },
  methods: {
    changeCode() {
      this.imageUrl = `${this.$store.getters.imgUrl}/auth/login/getValidateImage.do?random=${Math.random() * 1000}`;
    },
    submitForm(formName) {
      let password; 
      // try {
      // 	// password = MD5(this.ruleForm.password)
      // } catch (error) {
					
      // }
      this.$store.commit("setLoading");
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          const res = await login({
            pwd: password,
            code: this.ruleForm.loginCheckCode,
            phone: this.ruleForm.phoneNum,
          });
          if (res.success) {
            // 登录成功
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: res.errMsg,
              type: "error",
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>

	.body {
		width: 100%;
		height:100%;
		flex: 1;
		.form {
			margin:0px auto;
			width:400px;
			height:280px;
			background:#fff;
			border-radius: 6px;
			box-shadow:0px 2px 12px 6px rgba(3,5,27,0.06);
			.login-title {
				font-size: 2em;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				text-align: center;
				color: #098cc8;
				line-height: 65px;
				letter-spacing: 1px;
			}
			.content {
				width: 310px;
				margin: 24px auto;
				.login-btn {
					width: 100%;
					background: #098cc8;
					-webkit-box-shadow: 0px 6px 8px 0px rgba(42, 83, 236, 0.38);
					box-shadow: 0px 6px 8px 0px rgba(42, 83, 236, 0.38);
					border-radius: 4px;
				}
			}
		}
	}

</style>
